<template>
  <!-- 内容列表组件 -->
  <ul class="main-content">
    <li class="main-content-item" v-for="item in list" :key="item.id">
      <span>{{ item.id }}、</span>
      <span>姓名:{{ item.name }};</span>
      <span>地址：{{ item.address }};</span>
      <span>成绩：{{ item.grade }};</span>
      <hr style="margin: 5px" />
      <span class="edit" @click="handleEdit(item)">编辑</span>
      <span class="remove" @click="handleRemove(item)">删除</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    handleEdit(item) {
      this.$emit('onEdit', item)
    },
    handleRemove(item) {
      this.$emit('onRemove', item)
    },
  },
}
</script>

<style></style>
